<template>
  <div class="wrap">
    <div class="title">
      申请提现<em class="most">(最多可提现 ¥ {{ resBalancePrice }}元)</em>
    </div>
    <div class="content">
      <img src="@/assets/menuStatus5.png" alt="" class="menuStatus" />
      <div class="left">
        <p class="widthTitle">提现金额</p>
        <p class="lowest">最低提现额度 ¥ {{ resFetchConfig.lowFetchPrice }}元</p>
      </div>
      <div class="right">
        <input type="number" placeholder="请输入金额" v-model="money" />
      </div>
    </div>
    <div class="dealDate">提现处理时间为工作日 9:00—17:00</div>
    <div class="backWrap" @click="jumpBankCarList" v-if="showBankInfo">
      <img src="@/assets/bankCar.png" alt="" class="bankCar" />
      <div class="backText">银行卡</div>
      <div class="rightBack">
        <em>{{ showBankInfo.bankName }}</em>
        <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
      </div>
    </div>
    <div class="backWrap" @click="jumpBankCarList" v-if="!showBankInfo">
      <img src="@/assets/bankCar.png" alt="" class="bankCar" />
      <div class="backText">银行卡</div>
      <div class="rightBack">
        <em>暂未绑定银行卡，请前往绑定</em>
        <img src="@/assets/rightArrow.png" alt="" class="rightArrow" />
      </div>
    </div>
    <div class="backMoneyWrap">
      <div class="leftMoney">技术服务费:{{ resFetchConfig.tecServerRatio }}%</div>
      <div class="rightMoney">到账金额:{{ realMoney || "请输入提现金额" }}</div>
    </div>
    <div class="btnSure" @click="sureRecharge">确认提现</div>

    <div class="maskWrap" v-if="payMask">
      <div class="maskBg" @click="payMask = false"></div>
      <div class="chooseNumWrap">
        <div class="maskTitle">余额支付密码</div>
        <div class="explain">请输入余额支付密码,以验证身份</div>
        <div class="maskExpalin">
          <van-password-input
            :value="value"
            info="密码为 6 位数字"
            :error-info="errorInfo"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
          />
          <van-number-keyboard
            v-model="value"
            :show="showKeyboard"
            @blur="showKeyboard = false"
          />
        </div>
        <div class="maskBack" @click="payMask = false,value=''">返回</div>
      </div>
    </div>
  </div>
</template>

<script>
import { RadioGroup,PasswordInput, NumberKeyboard } from "vant";
import {
  apiGetUserBankList,
  apiPlatformGetUserShopDetails,
  apiGetFetchConfig,
  apiGetAppUserInfo,
  apiApplyFetch,
  apiCheckPayPassword
} from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      money: "", //输入的钱
      shopId: "",
      showBankInfo: "",
      chooseBankCar: this.$route.query.chooseBankCar, //从选择银行卡（添加银行卡页面来的）
      resFetchConfig:'', //提现系统配置
      resBalancePrice: "", //账户余额
      realMoney: 0, //实际到账金额
      payMask: false,
      value: "", //支付密码
      errorInfo: "",
      showKeyboard: true,
    };
  },
  watch: {
    money: {
      handler(newvalue, oldvalue) {
        var pointer = Number(this.resFetchConfig.tecServerRatio) * 0.01;
        this.realMoney =(Number(newvalue) - Number(newvalue) * pointer).toFixed(2);
        if( this.realMoney=='NaN'){
          this.realMoney="请输入提现金额"
        }
        console.log("开始立刻执行监听函数", this.realMoney);
      },
      immediate: true,
    },
    value(value) {
      console.log("vall", value);
      if (this.value.length == 6) {
        console.log("输入完成");
        this.checkPassWord();
      }
    },
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#F2F4FA");
    this.getUserBankList();
    this.getAppUserInfo();
    this.getFetchConfig();
  },
  methods: {
    //银行卡列表:
    getUserBankList() {
      apiGetUserBankList({}).then((res) => {
        if (this.chooseBankCar) {
          //如果自定义选择了银行卡
          this.showBankInfo = this.chooseBankCar;
        } else {
          //如果没有则默认在银行卡列表里面显示第一张
          this.showBankInfo = res.data[0] ? res.data[0] : [];
        }
        console.log("showBankInfo", this.showBankInfo);
      });
    },
    //店铺详情api获取商铺id：
    getShopDetails() {
      apiPlatformGetUserShopDetails({}).then((res) => {
        this.shopId = res.data.id;
      });
    },
    //用户资料详情获取余额（可提现金额）：
    getAppUserInfo() {
      apiGetAppUserInfo({}).then((res) => {
        this.resBalancePrice = res.data.balancePrice;
      });
    },

    //获取提现配置：
    getFetchConfig() {
      apiGetFetchConfig({}).then((res) => {
        this.resFetchConfig = res.data;
      });
    },

    //申请提现:
    getApplyFetch() {
      apiApplyFetch({
        bankCardNum: this.showBankInfo.cardNum,
        bankName: this.showBankInfo.bankName,
        toUserName: this.showBankInfo.realName,
        fetchPrice: this.money,
        payPassword: this.value,
        tecServerRatio: this.resFetchConfig.tecServerRatio,
        type: 0,
      }).then((res) => {
        if (res.code == 200) {
          this.$toast.success("提现申请已提交，等待审核到账!");
          this.$router.push({
            path: "/pages/bMyWallet",
            query: {
              //传递参数
            },
          });
        }
      });
    },
    //校验输入的余额密码是否正确：
    checkPassWord() {
      apiCheckPayPassword({
        payPassword: this.value,
      }).then((res) => {
        if (res.data == true) {  //密码输入正确
          this.getApplyFetch()
        } else { //密码输入错误
          this.$toast.fail("原支付密码有误，请重新输入");
          return
        }
      });
    },
    //确认充值：
    sureRecharge(){
      console.log('showBankInfo',Number(this.resFetchConfig.lowFetchPrice),Number(this.money))
      if(Number(this.resFetchConfig.lowFetchPrice)>Number(this.money)){
        console.log('222222222')
        this.$toast.fail('提现金额不能低于最低提现金额')
        return
      }
      if(this.showBankInfo.length==0){
        this.$toast.fail('请选择提现到账银行卡')
        return
      }else if (this.money=='') {
        this.$toast.fail('请输入提现金额')
        return
      }else if (this.money>this.resBalancePrice) { //输入的提现金额大于账户余额
        this.$toast.fail('当前余额不足')
        return
      }
      this.payMask = true
    },
    jumpBankCarList() {
      this.$router.push({
        path: "/pages/myBankCarList",
        query: {
          //传递参数
          fromId: 0,
        },
      });
    },
  },
  created() {},
  components: {
    [RadioGroup.name]: RadioGroup,
    [PasswordInput.name]:PasswordInput,
    [NumberKeyboard.name]:NumberKeyboard
  },
};
</script>

<style scoped>
.title {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  padding: 20px;
}
.content {
  width: 95%;
  height: 90px;
  background: #ffffff;
  border-radius: 20px;
  margin: 0 auto;
}
.most {
  font-size: 11px;
  color: #666666;
  padding-left: 3px;
}
.menuStatus {
  width: 46px;
  float: left;
  margin-top: 20px;
  margin-left: 13px;
}
.left {
  float: left;
  margin-left: 13px;
  margin-top: 25px;
  height: 46px;
  margin-left: 6;
  /* display: flex;
  align-items: center; */
}

.lowest {
  color: #666666;
  font-size: 10px;
  margin-top: 10px;
}
.widthTitle {
  font-size: 16px;
  font-weight: 600;
  color: #000000;
}

.right {
  float: right;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  margin-top: 30px;
  margin-right: 25px;
}
input {
  width: 60px;
  height: 30px;
}
input::placeholder{
  font-size: 12px !important;
}
.dealDate {
  font-size: 10px;
  font-weight: 300;
  color: #000000;
  margin-left: 2.5%;
  margin-top: 10px;
}
.backWrap {
  width: 95%;
  margin: 0 auto;
  margin-top: 16px;
  height: 59px;
  background: #ffffff;
  border-radius: 15px;
}
.bankCar {
  width: 21px;
  height: 19px;
  float: left;
  margin: 20px 0px 20px 20px;
}
.backText {
  float: left;
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  margin-top: 19px;
  margin-left: 10px;
}
.rightBack {
  float: right;
  font-size: 14px;
  font-weight: 300;
  color: #000000;
  margin-top: 10px;
  margin-right: 20px;
}
.rightArrow {
  width: 4px;
  height: 7px;
  margin-left: 10px;
  margin-top: 19px;
}
.backMoneyWrap {
  width: 95%;
  margin: 15px auto;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #000;
}
.leftMoney {
}
.rightMoney {
}
.btnSure {
  width: 95%;
  position: fixed;
  left: 2.5%;
  bottom: 20px;
  height: 50px;
  line-height: 50px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0px;
}
.chooseNumWrap {
  width: calc(90% - 30px);
  background-color: #fff;
  position: fixed;
  top: 15vh;
  border-radius: 20px;
  color: #181818;
  margin-left: 5%;
  padding: 15px;
}
.maskTitle {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.explain {
  font-size: 12px;
  color: #999;
  text-align: center;
  margin-bottom: 10px;
}
.maskExpalin {
  font-size: 10px;
  font-weight: 300;
  line-height: 20px;
}
.maskBack {
  width: 115px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  margin: 0 auto;
  color: #fff;
  text-align: center;
  margin-top: 22px;
}
</style>
